<template>
  <div class="team_info_box">
    <el-row>
      <el-col :span="4">
        <div class="avatar_box">
          <img src="~@/assets/images/teamhospital.png" alt/>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="team_info">
          <div class="team_name">{{teamDetails.teamName}}</div>
          <div class="team_txt">{{teamDetails.content}}</div>
          <div class="team_navs">
            <el-button class="nav_save" type="primary" @click="selectTeam">选择该团队</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="team_doctor_box">
      <doctorWrap
        :doctor-data="teamDetailsDoctorList"
        :select-disabled="selectDisabled"
        @doctorDetails="goDoctorDetails"
      />
    </div>
  </div>
</template>

<script>
import doctorWrap from '@/components/consultant/doctorWrap'
export default {
  components: {
    doctorWrap
  },
  props: {
    teamDetails: {
      type: Object
    },
    teamDetailsDoctorList: {
      type: Array
    }
  },
  data() {
    return {
      selectDisabled: true
    }
  },
  methods: {
    // 医生详情
    goDoctorDetails(data) {
      this.$emit('doctorDetails', data)
    },
    // 选择团队
    selectTeam() {
      this.$emit('selectTeam', { team: this.teamDetails })
    }
  }
}
</script>

<style lang="scss" scoped>
.team_info_box {
  .avatar_box {
    width: 100%;
    margin: 0 auto;
    img {
      display: block;
      width: 100%;
      max-width: 160px;
      height: auto;
    }
  }
  .team_info {
    padding-left: 20px;
    .team_name {
      font-size: 16px;
      color: #333;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .team_txt {
      font-size: 14px;
      color: #666;
      line-height: 1.7em;
      margin: 3px 0;
      min-height: 55px;
    }
    .team_navs {
      overflow: hidden;
      .nav_save {
        float: right;
      }
    }
  }
  .team_doctor_box {
    margin-top: 20px;
    padding: 10px 0;
    border-top: solid 1px #f3f3f3;
  }
}
</style>
